<template>
	<view>
		
		<!-- 热门搜索 -->
		<view class="uni-title" v-show="showHot">热门搜索</view>

		<view class="seven" v-show="showHot">
			<view class="hot-lists" @click="searchSong(song.first)" v-for="(song, index) in hotSongs" :key="index">
				<uni-tag class="hot-item" :text="song.first" type="" circle="true"></uni-tag>
			</view>
		</view>
		
		<!-- 搜索历史 -->
		<view class="uni-title" v-show="historySongs.length">搜索历史</view>

		<view class="seven" v-show="historySongs.length">
			<view class="history-lists" @click="searchSong(historySongs[index])" v-for="(songName, index) in historySongs" :key="index">
				<uni-tag class="history-item" :text="songName" type="" circle="true"></uni-tag>
			</view>
		</view>
		
		<!-- 搜索结果 -->
		<view class="uni-title" v-show="searchSongs.length">搜索结果</view>

		<view class="seven martom" v-show="searchSongs.length">
			<view class="uni-media-list" @click="getAudioData(song)" v-for="(song, index) in searchSongs" :key="index">
				<!-- 歌曲名称 -->
				<view class="uni-media-list-body">
					<!-- 歌曲名 -->
					<view class="uni-media-list-body-top">{{song.name}}</view>
					<!-- 第一个歌手名 -->
					<view class="uni-media-list-body-bottom">{{song.artists[0].name}}</view>
				</view>
			</view>
		</view>
		
		<!-- 播放栏 -->
		<view class="play-area">
			<play-bar></play-bar>
		</view>
		
	</view>
</template>

<script>
	import Vuex from 'vuex';
	// uni标签组件
	import uniTag from "@/components/uni-tag/uni-tag.vue";
	// uni列表组件
	import uniList from "@/components/uni-list/uni-list.vue";
	// uni列表项组件
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue";
	// 播放栏
	import playBar from "@/components/custom/play-bar.vue";

	const _URL = 'https://api.wulv5.com/music';
	
	export default {
		components: {
			uniTag,
			uniList,
			uniListItem,
			playBar
		},
		data() {
			return {
				// 是否显示热门搜索
				showHot: true,
				// 存放热门搜索歌曲
				hotSongs: [],
				// 存放搜索历史
				historySongs: [],
				// 存放搜索到的歌曲的歌曲名
				searchSongs: []
			}
		},
		mounted() {
			uni.request({
				url: `${_URL}/search/hot`,
				method: 'GET',
				success: res => {
					//console.log(res);
					// 存储热门搜索
					this.hotSongs = res.data.result.hots;
				},
				fail: () => {
					console.log("请求资源失败 - 热门搜索歌曲数组");
				}
			});
		},
		// 导航栏搜索框被确认
		onNavigationBarSearchInputConfirmed(e) {
			let content = e.text;
			if(content != '') {
				// 传入搜索值
				this.searchSong(content);
				this.historySongs.push(e.text)
			}
		},
		// 导航栏搜索框被点击
		methods: {
			...Vuex.mapActions([
				'getAudioData'
			]),
			searchSong(name) {
				uni.request({
					url: `${_URL}/search?keywords=${name}`,
					method: 'GET',
					success: res => {
						//console.log(res);
						// 清空并重新存储搜索的歌曲
						this.searchSongs = res.data.result.songs;
					},
					fail: () => {
						console.log("请求资源失败 - 搜索歌曲")
					}
				});
			}
		}
	}
</script>

<style>
	
	/* 热门歌曲标签列表 */
	.hot-lists {
		display: inline-block;
	}
	/* 历史搜索歌曲列表 */
	.history-lists {
		display: inline-block;
	}
	
	/* 热门歌曲每个标签 */
	.hot-item {
		margin: 2upx 5upx;
		color: white;
		background-color: red;
		font-size: 20upx;
	}
	.history-item {
		margin: 2upx 5upx;
		color: white;
		background-color: orange;
		font-size: 20upx;
	}
	
	/* 播放栏 */
	.play-area {
		position: fixed;
		bottom: 0;
	}
	
	/* 底部100外边距 */
	.martom {
		margin-bottom: 100upx;
	}
	
	/* uni样式覆盖 */
	.uni-media-list {
		padding: 0 10upx;
		border-top: 1upx solid red;
	}
	.uni-media-list-body {
		padding: 0 50upx 10upx;
		color: red;
		font-weight: bold;
	}
	.uni-media-list-body-bottom {
		padding: 0 10upx;
		font-size: 10upx;
		font-weight: normal;
		color: white;
		background-color: black;
	}
	
</style>
